<!-- 公告组件 -->
<!-- 小默子 2020/9/2更新 -->
<!-- 小默子 2020/9/7更新 除圈主之外，其余人不可改变公告 -->

<!-- 小吉子 更新于2020.09.10 -->
<!-- 修改：为了在不修改后台逻辑条件下 使得公告内容可以完整获取 采用小鸽子公告组件 -->

<!-- 桃子 更新于2020.09.11 -->
<!-- 增加了时间展示 -->
<template>
	<!-- 公告组件 -->
	<view v-show="isDelete" class="noticeList">
		<view class="notices">
			<!-- 公告标题 -->
			<!-- <view class="noticeTitle">
				{{SummaryData.title}}
			</view> -->
			<!-- 公告内容 -->
			<!-- <view class="content">
				{{SummaryData.body}}
			</view>		 -->	
			<Notice :datas="SummaryData"></Notice>
			<!-- 发布人：发布时间 -->
			<view class="nameTime">
				{{SummaryData.authorName}} : {{SummaryData.publishTime}}
			</view>
		</view>
		<!-- 选项 -->
		<view class="choice" v-show="(role == 3) || (role == 4)">
			<text class="inxupt inxupttubiao2" @tap="more"></text>
			<view class="choiceOptions" v-show="isMore">
				<view @tap="deleteNotice">删除公告</view>
				<view @tap="toTop" v-if="!SummaryData.top">置顶公告</view>
				<view @tap="cancelTop" v-if="SummaryData.top">取消置顶</view>
			</view>
		</view>
		
		<!-- 置顶/最新 -->
		<view class="textStatus">
			<!-- 是否显示置顶 -->
			<view v-if="SummaryData.top">TOP</view>
		</view>
	</view>
</template>

<script>
	import {_ajax} from '../../in-xupt-functions.js'
	import Notice from './Notice.vue'
	export default {
		props: {
			datas: {
				type: Object,
				default() {
					return {}
				},
			},
			num: {
				type: Number
			},
			role: {
				type: String
			}
		},
		data() {
			return {
				isDelete: true,
				isShow: false,
				isMore: false,
				content:{
					announceType:'置顶公告',
				},
				indexIs0: false,//置顶标志
			};
		},
		methods: {
			// 显示下拉框
			more () {
				this.isMore = !this.isMore;
				if(this.timmer){
					clearTimeout(this.timmer)
				}
				if(this.isMore) {
					this.timmer = setTimeout(() => {
						this.isMore = false
					},2000)
				}
				
			},
			// 删除公告接口
			deleteNotice: function () {
				this.isMore = false
				let _self = this
				_ajax({
					url: '/announcement/'+_self.SummaryData.id,
					method: 'DELETE'
				}).then(res => {
					this.$emit('refreshPage')
					if(res.data.status != 0) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 置顶函数
			toTop: function () {
				this.isMore = false
				let _self = this
				_ajax({
					url: '/announcement/' + _self.SummaryData.id + '/top',
					method: 'POST'
				}).then(res => {
					this.$emit('refreshPage')
					if(res.data.status == 0) {
						uni.isRefresh = true
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 取消置顶函数
			cancelTop: function () {
				this.isMore = false
				let _self = this
				_ajax({
					url: '/announcement/' + _self.SummaryData.id + '/top',
					method: 'DELETE'
				}).then(res => {
					this.$emit('refreshPage')
					if(res.data.status == 0) {
						uni.isRefresh = true
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			}
			// pop () {
			// 	this.isShow = !this.isShow
			// },
			// appearShade(){
			// 	this.isShow=!this.isShow;
			// },
			// disappearShade(){
			// 	this.isShow=false;
			// },
			
			
		},
		computed: {
			SummaryData() {
				return this.$props.datas
			}
		},
		components: {
			Notice
		}
	}
</script>

<style lang="less">
	page {
		background-color: @g-background;
	}
	.noticeList {
		position: relative;
		padding: 10rpx 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	.noticeTitle {
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.content {
		height: 110rpx;
		overflow: hidden;
		font-size: @uni-font-size-base;
	}
	// .inxupt .inxupttubiao2 {
	// 	position: fixed;
	// }
	.choice{
		position: absolute;
		right: 20rpx;
		top: 30rpx;
		.choiceOptions {
			width: 128rpx;
			background-color: #fff;
			position: absolute;
			z-index: 10;
			padding: 10rpx;
			border-radius: 10rpx;
			right: 0rpx;
			box-shadow: 0rpx 0rpx 30rpx rgba(0,0,0,.2);
			view {
				font-size: 14px;
				width: 100%;
				text-align: center;
				margin-bottom: 10rpx;
			}
		}
	}
	.nameTime {
		color: @g-gray;
		font-size: 14px;
	}
	.topText {
		position: absolute;
		margin-top: -44rpx;
		right: 10rpx;
	}
	.textStatus {
		color: @g-pink;
		position: absolute;
		right: 72rpx;
		bottom: 36rpx;
		view {
			font-weight: 800;
			font-size: 12px;
		}
	}
	// .shade{
	// 		position: fixed;
	// 		top: 0;
	// 		left: 0;
	// 		right: 0;
	// 		height: 100%;
	// 		background-color: rgba(0, 0,0,0.6);
	// 		z-index: 9999;
	// 		.announceBox{
	// 			position: fixed;
	// 			top: 25%;
	// 			left: 13%;
	// 			width: 76%;
	// 			height: 48%;
	// 			background-color: rgb(199, 199, 199);
	// 			border-radius: 24rpx;
	// 			.announceTitle{
	// 				background-color: rgb(255, 255, 255);
	// 				height: 72rpx;
	// 				border-radius: 24rpx 24rpx 0 0;
	// 				line-height: 70rpx;
	// 				margin-bottom: 3rpx;
	// 				.inxupttubiao32{
	// 					color: #f76b8a;
	// 					position: relative;
	// 					top: 0%;
	// 					left: 4%;
	// 				}
	// 				.titleText{
	// 					position: relative;
	// 					top: 2%;
	// 					left: 7%;
	// 					font-size: 32rpx;
	// 				}
	// 			}
	// 			.announceContent{
	// 				height: 94%;
	// 				background-color: rgb(255,255,255);
	// 				border-radius:  0 0 24rpx 24rpx;
	// 				.Content_box{
	// 					width: 92%;
	// 					height: 85%;
	// 					margin: 0 auto;
	// 					.contentTitle{
	// 						padding: 6rpx 0;
	// 						font-weight: 600;
	// 						font-size: 28rpx;
	// 					}
	// 					.contentText{
	// 						font-size: 32rpx;
	// 						padding-top: 4rpx;
	// 						width: 100%;
	// 						height: 30%;
	// 						overflow: auto;
	// 					}
	// 					.contentImage{
	// 						width: 60%;
	// 						height: 59%;
	// 						margin: 6rpx auto;
	// 						overflow: auto;
	// 						image{
	// 							width: 100%;
	// 							height: 100%;
	// 						}
	// 					}
						
	// 				}
	// 				.contentButton{
	// 					position: absolute;
	// 					bottom: -3%;
	// 					left: 4%;
	// 					width: 93%;
	// 					height: 68rpx;
	// 					border-radius: 16rpx;
	// 					background-color: #d9cc36;
	// 					text-align: center;
					
	// 					button{
	// 						width: 100%;
	// 						height: 100%;
	// 							line-height: 76rpx;
	// 							font-size: 32rpx;
	// 					}
	// 				}						
	// 			}
	// 		}
	// 	}
</style>

